﻿<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>CSS属性border-spacing的应用</title>
        <style>
            .style01 {
                border-spacing: 10px
            }
            .style02 {
                border-spacing: 50px 10px
            }
        </style>
    </head>
    <body>
        <h3>CSS属性border-spacing的应用</h3>
        <hr />
        <table border="1" class="style01">
            <caption>
                单个属性值效果：边框距离10像素
            </caption>
            <tr>
                <td>年份</td>
				<td>第一季度</td>
				<td>第二季度</td>
				<td>第三季度</td>
            </tr>
            <tr><td>2014</td><td>100</td><td>200</td><td>300</td></tr>
            <tr><td>2015</td><td>150</td><td>250</td><td>350</td></tr>
            <tr><td>2016</td><td>200</td><td>300</td><td>400</td></tr>
        </table>
        <br />

        <table border="1" class="style02">
            <caption>
                两个属性值效果：水平方向50像素，垂直方向10像素
            </caption>
            <tr>
                <td>年份</td>
				<td>第一季度</td>
				<td>第二季度</td>
				<td>第三季度</td>
            </tr>
            <tr><td>2014</td><td>100</td><td>200</td><td>300</td></tr>
            <tr><td>2015</td><td>150</td><td>250</td><td>350</td></tr>
            <tr><td>2016</td><td>200</td><td>300</td><td>400</td></tr>
        </table>
    </body>
</html>